<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>审核完成文章列表</title>
    <link href="/css/style.css" rel="stylesheet" type="text/css" />
    <script src="/js/jquery.js" type="text/javascript"></script>
    <script src="/js/vue3.js"></script>
    <script src="/js/axios.min.js"></script>
    <script language="javascript">
        $(function () {
            //导航切换
            $(".imglist li").click(function () {
                $(".imglist li.selected").removeClass("selected")
                $(this).addClass("selected");
            })
        })	
    </script>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".click").click(function () {
                $(".tip").fadeIn(200);
            });

            $(".tiptop a").click(function () {
                $(".tip").fadeOut(200);
            });

            $(".sure").click(function () {
                $(".tip").fadeOut(100);
            });

            $(".cancel").click(function () {
                $(".tip").fadeOut(100);
            });

        });
    </script>
</head>

<body>
    <div class="place">
        <span>位置：</span>
        <ul class="placeul">
            <li><a href="#">文章管理</a></li>
            <li><a href="#">审核完成文章列表</a></li>
        </ul>
    </div>
    <div class="rightinfo" id="box">
        <table class="tablelist">
            <thead>
                <tr>
                    <th><input type="checkbox" /></th>
                    <th>文章ID</th>
                    <th>文章标题</th>
                    <th>审核评价</th>
                    <th>审核时间</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item,index) in currentPageData">
                    <td><input type="checkbox" /></td>
                    <td>{{item.articleId}}</td>
                    <td>{{item.remark}}</td>
                    <td>{{item.title}}</td>
                    <td>{{item.createtime}}</td>
                </tr>
            </tbody>
        </table>

        <!-- 分页div -->
        <div class="pagin">
            <div class="message">
                共<i class="blue">{{info.total}}</i>条记录，当前显示第&nbsp;
                <i class="blue">{{info.pageNum}}&nbsp;</i>页
            </div>
            <ul class="paginList">
                <!-- 首页 -->
                <li class="paginItem" @click="getPage(1)"><a href="javascript:;">首页</a></li>

                <!-- 上一页 -->
                <template v-if="info.isFirstPage">
                    <li class="paginItem">
                        <a href="javascript:;"><span class="pagepre"></span></a>
                    </li>
                </template>
                <template v-else>
                    <li class="paginItem" @click="getPage(prePage)">
                        <a href="javascript:;"><span class="pagepre"></span></a>
                    </li>
                </template>

                <!-- 循环遍历页码 -->
                <li class="paginItem" v-for="index of pages" :key="index" @click="getPage(index)">
                    <a href="javascript:;">{{index}}</a>
                </li>

                <!-- 下一页 -->
                <template v-if="info.isLastPage">
                    <li class="paginItem">
                        <a href="javascript:;"><span class="pagenxt"></span></a>
                    </li>
                </template>
                <template v-else>
                    <li class="paginItem" @click="getPage(nextPage)">
                        <a href="javascript:;"><span class="pagenxt"></span></a>
                    </li>
                </template>

                <!-- 尾页 -->
                <li class="paginItem" @click="getPage(pages)"><a href="javascript:;">尾页</a></li>

            </ul>
        </div>

    </div>

</body>

<script type="text/javascript">
    $('.tablelist tbody tr:odd').addClass('odd');
</script>

<script>
    var obj = {
        data () {
            return {
                currentPageData: [], //当前页显示内容
                info: [], // 服务器返回数据的集合
                prePage: 0, // 上一页页码
                nextPage: 0, // 下一页页码
                pages: 0, // 总页数
            }
        },
        mounted () {
            axios({
                method: 'get',
                url: '/blog/checkEmp/checked/1',
            }).then(function (result) {
                console.log(result);
                vm.currentPageData = result.data.data.list;
                vm.info = result.data.data;
                vm.prePage = result.data.data.prePage;
                vm.nextPage = result.data.data.nextPage;
                vm.pages = result.data.data.pages;
            });
        },
        methods: {
            getPage (pageNum) {
                axios({
                    method: 'get',
                    url: '/blog/checkEmp/checked/' + pageNum,
                }).then(function (result) {
                    vm.currentPageData = result.data.data.list;
                    vm.info = result.data.data;
                    vm.prePage = result.data.data.prePage;
                    vm.nextPage = result.data.data.nextPage;
                    vm.pages = result.data.data.pages;
                });
            }
        }
    }
    var vm = Vue.createApp(obj).mount("#box")
</script>

</html>